iT邦幫忙

5

javascript的範例學習:以jQuery為例(九),chain/chaining

  • 分享至 

  • xImage
  •  

jQuery大大的改變了使用者撰寫javascript的風格,
最大的功能,就是讓撰寫javascript的門檻降低,
讓筆者比較驚奇的是,為什麼javacript可以藉由class library的方式,
衍生出一個副語言,覺得jQuery已自成一個語言平台,在平台上成了一個ECO SYSTEM生態圈,
衍生了不少工作機會。
除了選取器的部分,一部分接收CSS大部分常用的語法,一部分用最簡便的語法$()來操作.
在EVENT上也看得出jQuery團隊對api的設計,非常獨到。
其中chain method的設計也是高超易用性的一部分。
在iT邦有兩篇相關的文章,一篇是tony1223(台灣jsdc的創辦人/發起人)jQuery method chain reviewhttp://ithelp.ithome.com.tw/question/10090856
另一篇是aaroms9733的JQuery Chaininghttp://ithelp.ithome.com.tw/question/10090569
第一篇,提到了chain的原理,提出了要達到這種功能,程式的架構的撰寫原理(會讓人想要看看jQuery實作的一點衝動,但後來,真這樣做時,就後悔了。
這兩篇都提到,除了取值類型的方法外,可以說所有 " 操作 " 類型的方法都可以使用 Chaining 這個特色語法,這段話,好像從RETURN 的角度來看,

基本上 method chain 基本實作方式,
就是把本來 setter 或一般操作等原本無回傳值的函式,
改成回傳操作者自己。

,好像沒有做實驗的必要,因為getter就是回傳你想要get的值,
所以不回傳整個jQuery物件。

筆者做了一個小的片段,想要TRACE一下jQuery在遇到chain method時,調用的動作。
有沒有像前述作者所述的原理,

  <script src="http://code.jquery.com/jquery-latest.js"></script>


        <div id="myDiv">This is the first div</div>
         <div>This is the 2nd div</div>
<script>
  
$("div:first").click(function () {
    $("#myDiv").css("color","red")  
        .css("background","white")
        .fadeOut("slow")
        .fadeIn("slow")   //css("boder: 1px solid #FFF").
        .slideDown("slow")
        .slideUp("slow")
        .slideDown("slow")  
        .hide()
        .show()      
        ;
});       

</script>


​

中斷點就設在
$("#myDiv").css("color","red")

,然後進入jQuery,
先是這種形式的CHAIN,

.css("color","red")  
.css("background","white")

call stack呼叫的堆疊,

jQuery.extend.style (jquery-latest.js:6621)
jQuery.extend.type (jquery-latest.js:509)
jQuery.extend.isFunction (jquery-latest.js:493)
jQuery.extend.access (jquery-latest.js:843)
jQuery.fn.css (jquery-latest.js:6574)
(anonymous function) (chain.html:13)
jQuery.event.dispatch (jquery-latest.js:3332)
jQuery.event.add.elemData.handle.eventHandle (jquery-latest.js:2941)

區域變數是

arguments: Arguments[2]
name: "color"
this: jQuery.fn.jQuery.init[1]
value: "red"

比較精典的寫法

jQuery.fn.css = function( name, value ) {
	return jQuery.access( this, function( elem, name, value ) {
		return value !== undefined ?
			jQuery.style( elem, name, value ) :
			jQuery.css( elem, name );
	}, name, value, arguments.length > 1 );
};

沒幾行,但是繞了好久,
而另一部分,effects的部分,
呼叫順序是

Query.fn.extend.queue (jquery-latest.js:2146)
jQuery.fn.extend.animate (jquery-latest.js:8626)
jQuery.each.jQuery.fn.(anonymous function) (jquery-latest.js:8722)
(anonymous function) (chain.html:15)
jQuery.event.dispatch (jquery-latest.js:3332)
jQuery.event.add.elemData.handle.eventHandle (jquery-latest.js:2941)

比較值得注意的是

// Generate shortcuts for custom animations
jQuery.each({
	slideDown: genFx( "show", 1 ),
	slideUp: genFx( "hide", 1 ),
	slideToggle: genFx( "toggle", 1 ),
	fadeIn: { opacity: "show" },
	fadeOut: { opacity: "hide" },
	fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
	jQuery.fn[ name ] = function( speed, easing, callback ) {
		return this.animate( props, speed, easing, callback );
	};
});

特別的EACH用法。

一個jQuery裏很關鍵的fn,fn是什麼?
fn: function ( elem, name, value ),到處都出現。

小結:發現,這個過程真得很漫長,然後,就在不到一萬行的程式裏,會重覆呼叫幾個特定的METHOD,
重覆了幾次,讓人記憶慢慢深刻起來 。加深對jQuery設計的印象。
程式的進入點會不一樣,除了進入點 jQuery.fn.jQuery.init,是比較直覺的,
其他的進入點,像EFFECTS的進入點,讓人想不透。
繞了好幾圈,在chain的過程中,沒用整個物件的RETURN,可以一直一個effect接著一個effect的追蹤,大概也是chain的體現,chain借用了點的形式,這種風格算直覺,
讓user看次範例就能上手,設計上的高明之處。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-08-07 15:31:38

加油!筆記

我要留言

立即登入留言